<template>
  <div class="box">
    <div class="boxtop">
      <van-nav-bar title="信息编辑">
        <template #left>
          <van-icon
            name="arrow-left"
            color="#fff"
            size="18"
            @click="onClickLeft"
          ></van-icon>
        </template>
      </van-nav-bar>
    </div>
    <!-- tab栏得页面 -->
    <van-tabs v-model="activeName" color="#000000">
      <van-tab title="基础信息" name="a">
        <!-- 照片上传区域 -->
        <div class="uploadPhone">
          <div class="phone" @click="$refs.file.click()" :style="backgroundImg">
            <input type="file" hidden ref="file" @change="onFileChange" />
            <img :src="vhclPic.imgUrl" />
          </div>
        </div>

        <!-- 表单区域 -->
        <div class="ownInfo">车主信息</div>
        <van-field
          v-model="ownerInfo.custName"
          placeholder="请输入用户名"
          label="客户名称"
        />
        <!-- 性别单选框 -->
        <van-field name="radio" label="客户性别">
          <template #input>
            <van-radio-group
              v-model="ownerInfo.sex"
              @change="radioChange"
              direction="horizontal"
            >
              <van-radio name="1" icon-size="16px">男</van-radio>
              <van-radio name="2" icon-size="16px">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <!-- 手机号 -->
        <van-field
          v-model="ownerInfo.telephone"
          type="tel"
          required
          label="联系电话"
          placeholder="请输入手机号"
        />
        <div class="ownInfo">车辆信息</div>
        <van-field
          v-model="carInfo.plateNumber"
          required
          placeholder="请输入车牌号"
          label="车牌号"
        />
        <!-- 车型选择器 -->
        <van-field
          v-model="carInfo.modelName"
          label="车型"
          required
          right-icon="arrow"
          placeholder="请选择车型"
          @click-right-icon="carclickVIN"
        />
        <van-field
          v-model="carInfo.vin"
          label="VIN"
          required
          right-icon="scan"
          placeholder="请输入VIN"
          @click-right-icon="carclickVIN"
        />
        <!-- 上牌日期 -->
        <van-field
          readonly
          clickable
          required
          name="calendar"
          :value="carInfo.registerDate | dateFormat"
          label="上牌日期"
          placeholder="点击选择日期"
          @click="showCalendar = true"
        />
        <van-calendar v-model="showCalendar" @confirm="onConfirm" />
        <!-- 表现里程 -->
        <van-field
          required
          v-model="carInfo.mileage"
          placeholder="请输入车牌号"
          label="表显里程"
        />
        <!-- 颜色 -->
        <van-field
          readonly
          clickable
          required
          name="picker"
          :value="carInfo.color"
          label="颜色"
          placeholder="点击选择颜色"
          @click="colorshowPicker = true"
          right-icon="arrow"
        />
        <van-popup v-model="colorshowPicker" position="bottom">
          <van-picker
            show-toolbar
            :columns="ArrayColor"
            @confirm="coloronConfirm"
            @cancel="colorshowPicker = false"
          />
        </van-popup>
        <!-- 过户次数 -->
        <van-field
          required
          v-model="carInfo.transferNo"
          placeholder="请输入车牌号"
          label="过户次数"
        />
        <!-- 使用性质 -->
        <van-field
          readonly
          clickable
          name="picker"
          :value="carInfo.useType"
          label="使用性质"
          placeholder="请选择"
          @click="usershowPicker = true"
          right-icon="arrow"
        />
        <van-popup v-model="usershowPicker" position="bottom">
          <van-picker
            show-toolbar
            :columns="ArrayUser"
            @confirm="useronConfirm"
            @cancel="usershowPicker = false"
          />
        </van-popup>
        <!-- 车型备注 -->
        <van-field
          v-model="carInfo.modelRemark"
          rows="2"
          autosize
          label="车型备注"
          type="textarea"
          clearable
          border
          maxlength="100"
          show-word-limit
          placeholder="请输入留言"
        />
      </van-tab>
      <van-tab title="配置信息" name="b">
        <div class="aaaa">
          <div class="configurationInfo">
            <!-- 制动设备 -->
            <div class="BesttopBox">
              <van-row gutter="20">
                <van-col span="7">
                  <div class="centerBox">制动设备</div>
                </van-col>
                <van-col span="6">{{ vhclConfigDetail.braking }}</van-col>
                <van-col span="6"></van-col>
                <van-col span="6"></van-col>
              </van-row>
            </div>

            <!-- 空调 -->
            <div class="topBox">
              <van-row gutter="20">
                <van-col span="7">
                  <div class="centerBox">空调</div>
                </van-col>
                <van-col span="6">{{ vhclConfigDetail.air }}</van-col>
                <van-col span="6"></van-col>
                <van-col span="6"></van-col>
              </van-row>
            </div>
            <!-- 座椅 -->
            <div class="topBox">
              <van-row gutter="20">
                <van-col span="7">
                  <div class="centerBox">座椅</div>
                </van-col>
                <van-col span="6">{{ vhclConfigDetail.seatMat }}</van-col>
                <van-col span="6">{{ vhclConfigDetail.seatMemory }}</van-col>
                <van-col span="4">{{ vhclConfigDetail.seatAdjust }}</van-col>
              </van-row>
            </div>
            <!-- 内饰颜色 -->
            <div class="topBox">
              <van-row gutter="20">
                <van-col span="7">
                  <div class="centerBox">内饰颜色</div>
                </van-col>
                <van-col span="6">{{ vhclConfigDetail.carInner }}</van-col>
                <van-col span="6"></van-col>
                <van-col span="6"></van-col>
              </van-row>
            </div>
            <!-- 驱动方式 -->
            <div class="topBox">
              <van-row gutter="20">
                <van-col span="7">
                  <div class="centerBox">驱动方式</div>
                </van-col>
                <van-col span="6">{{ vhclConfigDetail.driveMode }}</van-col>
                <van-col span="6"></van-col>
                <van-col span="6"></van-col>
              </van-row>
            </div>
            <!-- 娱乐系统 -->
            <div class="topBox">
              <van-row gutter="20">
                <van-col span="7">
                  <div class="centerBox">娱乐系统</div>
                </van-col>
                <van-col span="6">多碟</van-col>
                <van-col span="6">导航</van-col>
                <van-col span="6"></van-col>
              </van-row>
            </div>
            <!-- 倒车辅助系统 -->
            <div class="topBox">
              <van-row gutter="20">
                <van-col span="7">
                  <div class="centerBox">倒车辅助系统</div>
                </van-col>
                <van-col span="6">{{ vhclConfigDetail.backSys }}</van-col>
                <van-col span="6"></van-col>
                <van-col span="6"></van-col>
              </van-row>
            </div>
            <!-- 变速箱 -->
            <div class="topBox">
              <van-row gutter="20">
                <van-col span="7">
                  <div class="centerBox">变速箱</div>
                </van-col>
                <van-col span="6">{{ vhclConfigDetail.gearboxMode }}</van-col>
                <van-col span="6">{{ vhclConfigDetail.gears }}</van-col>
                <van-col span="6"></van-col>
              </van-row>
            </div>
            <!-- 车窗 -->
            <div class="topBox">
              <van-row gutter="20">
                <van-col span="7">
                  <div class="centerBox">车窗</div>
                </van-col>
                <van-col span="6">{{ vhclConfigDetail.carWin }}</van-col>
                <van-col span="6"></van-col>
                <van-col span="6"></van-col>
              </van-row>
            </div>
            <!-- 天窗 -->
            <div class="bottomBox">
              <van-row gutter="20">
                <van-col span="7">
                  <div class="centerBox">天窗</div>
                </van-col>
                <van-col span="6">{{ vhclConfigDetail.allWin }}</van-col>
                <van-col span="6"></van-col>
                <van-col span="6"></van-col>
              </van-row>
            </div>
          </div>
          <!-- 配置信息备注 -->
          <span class="SetingInfo">配置信息备注</span>
          <!-- 输入框 -->
          <div class="liuyanBox">
            <van-field
              v-model="vhclConfigDetail.remark"
              rows="2"
              autosize
              type="textarea"
              maxlength="100"
              placeholder="请输入"
              show-word-limit
            />
          </div>
          <span class="exitGoods">附属物品</span>
          <!-- 复选框 -->
          <div class="checkBoxinfo">
            <van-checkbox-group
              @change="changeCheckGrop"
              v-model="arrayDaracheck"
              direction="horizontal"
            >
              <div class="aaa" v-for="(item, index) in goodsData" :key="index">
                <van-checkbox :name="item.codeId" shape="square" icon-size="16">
                  <span class="checkSpan">{{ item.codeDesc }}</span>
                </van-checkbox>
                <!-- 单选框 -->
                <div class="bbbb">
                  <van-radio-group
                    @change="keyRadio"
                    v-model="object.checkradio"
                    direction="horizontal"
                    icon-size="16"
                  >
                    <div
                      class="checckRadio"
                      v-for="(item1, index1) in item.keyNumList"
                      :key="index1"
                    >
                      <van-radio :name="item1.codeId"
                        ><span class="spanCheck">{{
                          item1.codeDesc
                        }}</span></van-radio
                      >
                    </div>
                  </van-radio-group>
                </div>
              </div>
            </van-checkbox-group>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <van-row class="bottomBtn">
      <van-col span="6">
        <div @click="fauilClick" class="buttonClassBorder">战败</div>
      </van-col>
      <van-col span="6">
        <div class="buttonClassBorder" @click="ClickshowPopup">跟进</div>
      </van-col>
      <van-col span="6">
        <div class="buttonClassBorder" @click="startaCheck">开始检测</div>
      </van-col>
    </van-row>
    <!-- 弹出层 -->
    <van-popup position="bottom" :style="{ height: '70%' }" v-model="TanShow">
      <!-- 两边的按钮 -->
      <div class="BestWai">
        <div class="buttonLeft">跟进信息</div>
        <div class="buttonRight" @click="sumitClick">确定</div>
      </div>
      <!-- 跟进信息 -->
      <div class="boxInput">
        <van-field
          v-model="custIntentItem.followupContent"
          rows="2"
          autosize
          type="textarea"
          placeholder="请输入内容"
          show-word-limit
        />
      </div>
      <!-- 时间日期 -->
      <div class="TimePick">
        <div class="FollowTime">下次跟进时间</div>
        <van-datetime-picker
          v-model="custIntentItem.planFollowupDate"
          type="date"
          title="选择年月日"
          :min-date="minDate"
          :max-date="maxDate"
          :show-toolbar="false"
          @change="changetime"
        />
      </div>
    </van-popup>
  </div>
</template>
<script>
import {
  ListDetail,
  GoodsInfo,
  GainColor,
  UserInzhi,
  FollowBusiness,
  UPloadPhoto
} from '@/api/user'
export default {
  data () {
    return {
      activeName: 'a',
      // 车主信息
      ownerInfo: {
        custName: '',
        sex: '',
        telephone: ''
      },
      backgroundImg: {
        backgroundImage:
          'url(' + require('@/assets/registrationPhoto.png') + ')',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100% 100%'
      },
      // 操作类型
      // 战败
      fauil: '1',
      // 跟进
      reqType: '2',
      // 车辆信息
      carInfo: {
        plateNumber: '',
        vin: '',
        registerDate: '',
        // 表显里程
        mileage: '',
        // 颜色
        color: '',
        // 过户次数
        transferNo: '',
        // 使用性质
        useType: '',
        // 车型备注
        modelRemark: ''
      },
      value: '',
      showCalendar: false,
      // 颜色选择器
      colorvalue: '',
      columns: ['白', '黑', '红', '蓝', '绿'],
      colorshowPicker: false,
      usershowPicker: false,
      message: '',
      // 附属物品的复选框
      GoodsChecks: ['goodsChecks'],
      // 请求的颜色写死
      color: '2302',
      // 使用性质
      userData: '3000',
      // 获取颜色的数组
      ArrayColor: [],
      // 使用性质的数组
      ArrayUser: [],
      // 图片地址
      imgUrl: '',
      keyNum: '1',
      // 意向id
      custIntentId: '',
      // 定义一个对象
      object: {
        spec: 'no',
        repairBook: 'no',
        passNo: 'no',
        warnBoard: 'no',
        fire: 'no',
        spareTire: 'no',
        carKey: 'no',
        toolskit: 'no',
        carPrcd: 'no',
        checkradio: ''
      },
      // 点击跟进信息
      custIntentItem: {
        // 跟进信息
        followupContent: '',
        // 跟进时间
        planFollowupDate: ''
      },
      // 弹出层
      TanShow: false,
      currentDate: '',
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      isShow: true,
      // 获取数据字典里面物品属性
      vhclAttachOption: 'vhclAttachOption',
      // 附属物品
      goodsData: [],
      arrayDaracheck: [],
      // 上传图片
      vhclPic: {
        imgUrl: '',
        picType: 'image / jpeg'
      },
      // 路由传递得参数
      businessId: '',
      // custIntentId:'',
      vhclConfigDetail: {}
    }
  },
  created () {
    this.getAllInfo()
  },
  computed: {
    CarModel () {
      return this.$store.getters.carAllInfoModel
    }
  },
  methods: {
    async getAllInfo () {
      // 去路由传的参数
      this.businessId = this.$route.query.businessId
      this.custIntentId = this.$route.query.custIntentId
      // 根据id请求参数
      try {
        const { data } = await ListDetail(this.$route.query.businessId)
        // console.log(data);
        // 车主信息
        this.ownerInfo = data.data.custer
        // 车辆信息
        this.carInfo = data.data.business
        // 跟进信息
        this.custIntentItem = data.data.custIntentItem
        // 车辆配置信息
        this.vhclConfigDetail = data.data.vhclConfigDetail
        // 图片信息
        this.vhclPic.imgUrl = data.data.vhclPic.imgUrl
        // console.log(this.vhclConfigDetail);
      } catch (err) {
        this.$toast('获取失败')
      }
      // 进入页面首先要拿到值
      this.carInfo.modelName = this.$store.getters.carAllInfoModel
      // 获取颜色的数据字典
      try {
        const { data } = await GainColor(this.color)
        // this.colorData = data
        data.forEach((item, index) => {
          this.ArrayColor.push(item.codeDesc)
        })
      } catch (err) {
        this.$toast('获取失败')
      }
      try {
        const { data } = await UserInzhi(this.userData)
        // console.log(data);
        data.forEach((item) => {
          this.ArrayUser.push(item.codeDesc)
        })
        // console.log(this.ArrayUser);
        // 循环数组
      } catch {
        this.$toast('获取性质参数失败')
      }
      // 从数据字典里面获取附属物品
      try {
        const goods = await GoodsInfo(this.vhclAttachOption)
        console.log(goods)
        this.goodsData = goods.data.data
      } catch (err) {
        this.$toast('获取附属物品失败')
      }
    },
    async onFileChange () {
      this.$toast.loading({
        message: '上传中...',
        forbidClick: true,
        duration: 0
      })
      try {
        const file = this.$refs.file.files[0]
        const param = new FormData()
        param.append('file', file)
        console.log(param.get('file'))
        const { data } = await UPloadPhoto(param)
        console.log(data)
        this.vhclPic.imgUrl = data.data
        this.$toast.success('上传成功')
      } catch (err) {
        this.$toast('上传文件失败')
      }
    },
    onClickLeft () {
      this.$router.back()
    },
    // 车主的单选框
    radioChange (val) {
      this.ownerInfo.sex = val
    },
    carclickVIN () {
      this.$router.push('/carname')
    },
    // 上牌日期
    onConfirm (date) {
      var Years = date.getFullYear()
      var monthData = date.getMonth() + 1
      var month = 0
      var Data = 0
      if (monthData > 10) {
        month = date.getMonth()
      } else {
        month = '0' + monthData
      }
      console.log(month)
      if (date.getDate() > 10) {
        Data = date.getDate()
      } else {
        Data = '0' + date.getDate()
      }
      this.carInfo.registerDate = Years + '-' + month + '-' + Data
      // this.carInfo.registerDate = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
      this.showCalendar = false
    },
    // 颜色选择
    coloronConfirm (value) {
      this.carInfo.color = value
      this.colorshowPicker = false
    },
    // 使用性质
    useronConfirm (val) {
      this.carInfo.useType = val
      this.usershowPicker = false
    },
    goodsChecks (val) {
      console.log(val)
      // 循环数组
      val.forEach((item) => {
        // 遍历对象
        for (var i in this.object) {
          if (item === i) {
            this.object[i] = 'yes'
          }
        }
      })
    },
    evaluation () {
      console.log('打印按钮')
    },
    // 开始检测按钮
    startaCheck () {
      this.$router.push({
        path: '/cartest',
        query: { custIntentId: this.custIntentId }
      })
    },
    // 跟进
    async sumitClick () {
      try {
        const params = JSON.stringify({
          custer: this.ownerInfo,
          business: this.carInfo,
          reqType: this.reqType,
          vhclPic: this.vhclPic,
          custIntentItem: this.custIntentItem
        })
        console.log(params)
        const { data } = await FollowBusiness(params)
        console.log(data)
        this.TanShow = false
        // this.$toast("提交成功");
      } catch (err) {
        this.$toast('提交失败，请重试')
      }
    },
    async fauilClick () {
      this.$dialog.confirm({
        message: '确认提交?'
      })
      try {
        const params = JSON.stringify({
          custer: this.ownerInfo,
          business: this.carInfo,
          reqType: this.fauil,
          vhclPic: this.vhclPic
        })
        const { data } = await FollowBusiness(params)
        console.log(data)
        this.$toast('提交成功')
      } catch (err) {
        this.$toast('提交失败，请重试')
      }
      this.getAllInfo()
    },

    // 钥匙单选
    changeRadio (val) {
      this.keyNum = val
    },
    // 控制弹出层
    ClickshowPopup () {
      this.TanShow = true
    },
    bbbbbb (picker, val, colum) {},
    changetime (picker) {
      console.log(picker.getValues())
      const timeArry = picker.getValues()
      // 循环时间
      this.currentDate = `${timeArry[0]}-${timeArry[1]}-${timeArry[2]}`
      console.log(this.currentDate)
    },
    // 提交按钮
    // sumitClick () {
    //   this.TanShow = false
    //   // 跟进信息
    //   // custIntentItem:this.custIntentItem.followupContent
    // },
    changeCheckGrop (val) {
      console.log(val)
      // 循环遍历
      val.forEach((item) => {
        for (var i in this.object) {
          if (item === i) {
            this.object[i] = 'yes'
          }
          console.log(this.object)
        }
      })
    },
    keyRadio (val) {
      console.log(val)
      console.log(this.object)
    }
  }
}
</script>
<style lang="less" scoped>
.box {
  .wwww {
    width: 200px;
  }
  .van-tabs__line {
    height: 2px;
    background-color: #ccc;
  }
  .checkBoxinfo {
    padding-left: 25px;
    .aaa {
      width: 33%;
      margin-bottom: 5px;
      .bbbb {
        width: 250px;
      }
      .checckRadio {
        font-size: 14px;
        margin-top: 10px;
        .spanCheck {
          display: inline-block;
          font-size: 12px;
          margin-right: 56px;
        }
      }
      .checkSpan {
        display: inline-block;
        font-size: 12px;
      }
    }
  }

  .TimePick {
    padding-left: 10px;
    margin-top: 10px;
    .FollowTime {
      font-size: 16px;
    }
  }
  // 弹出框两边的按钮
  .BestWai {
    display: flex;
    justify-content: space-between;
    align-content: center;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    .buttonLeft {
      font-size: 16px;
      color: #5f5f5f;
      font-weight: 700;
    }
    .buttonRight {
      font-size: 17px;
      color: #4397d4;
      font-weight: 700;
    }
  }

  .boxInput {
    width: 343px;
    height: 97px;
    border: 1px solid #e5e5e5;
    margin: 0 auto;
    margin-top: 20px;
  }
  .van-checkbox-group {
    margin-bottom: 20px;
  }
  .bottomBtn {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    .buttonClassBorder {
      width: 85px;
      height: 34px;
      line-height: 34px;
      background: #4397d4;
      border-radius: 19px;
      color: #ffff;
      text-align: center;
      font-size: 14px;
    }
  }
  .boxtop {
    position: relative;
    height: 95px;
    width: 100%;
    background-color: #243865;
    .van-nav-bar {
      position: absolute;
      width: 100%;
      bottom: 0;
      background-color: transparent;
    }
  }
  .van-tab {
    font-size: 20px;
  }
  // 照片上传区域
  .uploadPhone {
    display: flex;
    border-top: 1px solid #eee;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 172px;
    background-color: #fff;
    .phone {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 181px;
      height: 114px;
      img {
        width: 100%;
        height: 100%;
      }
      .van-uploader {
        margin-top: 20px;
        margin-left: 50px;
        width: 100%;
        height: 100%;
      }
    }
  }
  // 车主信息
  .ownInfo {
    width: 100%;
    height: 45px;
    padding-left: 12px;
    background-color: #f6f6f9;
    line-height: 45px;
    font-size: 15px;
  }
}

// 配置信息中的样式
.configurationInfo {
  margin: 0 15px;
}
.BesttopBox {
  font-size: 12px;
  text-align: left;
  height: 30px;
  line-height: 30px;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  .centerBox {
    border-right: 1px solid #e5e5e5;
    padding-left: 3px;
  }
}
.topBox {
  font-size: 12px;
  text-align: center;
  text-align: left;
  height: 30px;
  line-height: 30px;
  border-bottom: 1px solid #e5e5e5;
  .centerBox {
    border-right: 1px solid #e5e5e5;
    padding-left: 3px;
  }
}
.bottomBox {
  font-size: 12px;
  text-align: center;
  text-align: left;
  height: 30px;
  line-height: 30px;
  border-bottom: 1px solid #e5e5e5;
  .centerBox {
    border-right: 1px solid #e5e5e5;
    padding-left: 3px;
  }
}
.SetingInfo {
  margin: 8px auto;
  margin-left: 15px;
  font-size: 14px;
  color: #333;
}
.liuyanBox {
  width: 90%;
  margin-left: 15px;
  border: 1px solid #e5e5e5;
}
.exitGoods {
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  margin-top: 8px;
  padding-left: 13px;
  color: #a4a4a4;
}
.firstHang {
  margin-top: 10px;
  .textStyle {
    display: inline-block;
    font-size: 14px;
  }
}
.statarbutton {
  font-size: 16px;
  width: 343px;
  height: 38px;
  line-height: 38px;
  background-color: #4397d4;
  border-radius: 20px;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 30px;
  display: flex;
  align-content: center;
  justify-content: center;
  .statar {
    display: block;
    font-size: 14px;
    color: #fff;
  }
}
</style>
